<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EASELJS例子</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="300"></canvas>
<button onclick="playSound();" class="playSound">Play Sound</button>
<button onclick="loadImage();" class="load-image">Load Image</button>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>
<script>
    function init(){
        var stage = new createjs.Stage("demoCanvas");
        var circle = new createjs.Shape();
        circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
        circle.x = 100;
        circle.y = 100;
        stage.addChild(circle);

        createjs.Tween.get(circle, { loop: true })
            .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
            .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
            .to({ alpha: 0, y: 225 }, 100)
            .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
            .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);
    }

    var soundID = "Music";
    function loadSound () {
        createjs.Sound.registerSound("assets/music.mp3", soundID);
    }

    function playSound () {
        createjs.Sound.play(soundID);
    }

    function loadImage() {
        var preload = new createjs.LoadQueue();
        preload.addEventListener("fileload", handleFileComplete);
        preload.loadFile("assets/paper_color_1.png");
    }

    function handleFileComplete(event) {
        document.body.appendChild(event.result);
    }

    init();
    loadSound();
</script>
</body>
</html>